<template>
  <div>
    <header>
      <div class="left" @click="$router.back()"></div>
      <p>{{type}}</p>
      <router-link tag="div" to="/search" class="search"></router-link>
    </header>

    <div class="nav" v-if="shopList">
      <van-tabs
        v-model="active"
        line-width="22px"
        line-height="2px"
        sticky
        offset-top="50"
      >
        <van-tab title="综合">
          <div class="content">
            <router-link
              tag="div"
              :to="'/details?id=' + vl.id"
              class="item"
              v-for="vl in dataAll()"
              :key="vl.id"
            >
              <div class="img">
                <img :src="vl.imgUrl" alt="" />
              </div>
              <div class="text">
                <div class="title one-txt-cut">{{ vl.title }}</div>
                <div class="price">￥{{ vl.price }}.00</div>
              </div>
            </router-link>
          </div>
        </van-tab>
        <van-tab title="销售">
          <div class="content">
            <router-link
              tag="div"
              :to="'/details?id=' + vl.id"
              class="item"
              v-for="vl in dataTop()"
              :key="vl.id"
            >
              <div class="img">
                <img :src="vl.imgUrl" alt="" />
              </div>
              <div class="text">
                <div class="title one-txt-cut">{{ vl.title }}</div>
                <div class="price">￥{{ vl.price }}.00</div>
              </div>
            </router-link>
          </div>
        </van-tab>
        <van-tab title="上新">
          <div class="content">
            <router-link
              tag="div"
              :to="'/details?id=' + vl.id"
              class="item"
              v-for="vl in dataNew()"
              :key="vl.id"
            >
              <div class="img">
                <img :src="vl.imgUrl" alt="" />
              </div>
              <div class="text">
                <div class="title one-txt-cut">{{ vl.title }}</div>
                <div class="price">￥{{ vl.price }}.00</div>
              </div>
            </router-link>
          </div>
        </van-tab>
        <van-tab title="价格">
          <div class="content">
            <router-link
              tag="div"
              :to="'/details?id=' + vl.id"
              class="item"
              v-for="vl in dataCheap()"
              :key="vl.id"
            >
              <div class="img">
                <img :src="vl.imgUrl" alt="" />
              </div>
              <div class="text">
                <div class="title one-txt-cut">{{ vl.title }}</div>
                <div class="price">￥{{ vl.price }}.00</div>
              </div>
            </router-link>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// import { getShopList } from "../api/shopList.js";
export default {
  data() {
    return {
      active: 0,
      shopList: null,
      type: "全部商品",
    };
  },
  methods: {
    dataAll() {
      return this.shopList;
    },
    dataTop() {
      return this.shopList.filter((vl) => vl.price > 40 && vl.price < 150);
    },
    dataNew() {
      let newShop = this.shopList.filter((vl) => vl.id > 0);
      let temp = null;
      for (let i = 0; i < this.shopList.length - 1; i++) {
        for (let j = i + 1; j > 0; j--) {
          if (newShop[j].id > newShop[j - 1].id) {
            temp = newShop[j];
            newShop[j] = newShop[j - 1];
            newShop[j - 1] = temp;
          }
        }
      }
      return newShop;
    },
    dataCheap() {
      let newShop = this.shopList.filter((vl) => vl.id > 0);
      let temp = null;
      for (let i = 0; i < this.shopList.length - 1; i++) {
        for (let j = i + 1; j > 0; j--) {
          if (newShop[j].price < newShop[j - 1].price) {
            temp = newShop[j];
            newShop[j] = newShop[j - 1];
            newShop[j - 1] = temp;
          }
        }
      }
      return newShop;
    },
    // 商品数据
    getShopListFun() {
      this.shopList = JSON.parse(sessionStorage.getItem("shopList"));
      let type = this.$route.query.type;

      if (type != this.type && type) {
        this.type = type;
        this.shopList = this.shopList.filter(vl => vl.shop_type.includes(type));
      }
    },
  },
  created() {
    this.getShopListFun();
    this.$emit("show");
  },
};
</script>

<style lang="scss" scoped>
// 头部
header {
  > .search {
    width: 20px;
    height: 20px;
    background: url(../assets/imgs/search_cio.png) no-repeat;
    background-size: contain;

    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

// 导航栏
.nav {
  .van-tabs::v-deep .van-tabs__wrap {
    height: 32px;

    .van-tab {
      font-size: 11px;
      top: -4px;

      &.van-tab--active {
        color: #e74165;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 31px;
      width: 100%;
      height: 2px;
      background: #ccc;
      transform: scaleY(0.3);
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 6px 12px 100px;
    clear: both;

    > .item {
      padding-bottom: 18px;
      width: calc(50% - 5px + (5px / 2));
      margin-right: 5px;

      > .img {
        width: 100%;

        > img {
          width: 100%;
        }
      }

      .text {
        margin-top: 4px;

        > .title {
          font-size: 14px;
          line-height: 14px;
        }

        > .price {
          margin-top: 4px;
          color: #e74197;
          font-size: 12px;
          line-height: 12px;
        }
      }

      &:nth-of-type(2n) {
        margin-right: 0;
      }
    }
  }
}

.bottom {
  width: 100%;
  height: 100px;
}
</style>